<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽</title>
    <style>
        .circle{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: deepskyblue;
            position: relative;
        }
    </style>

</head>
<body>
    <div class="circle">
        <script>
            var ball=document.getElementsByClassName('circle')[0];
            ball.onmousedown=function(e){
                var pageX=e.pageX;
                var pageY=e.pageY;
                console.log("按下时",pageX,pageY);
                document.onmousemove=function(movee){
                    var pageMoveeX=movee.pageX;
                    var pageMoveeY=movee.pageY;
                    console.log("移动时",pageMoveeX,pageMoveeY);

                    var offsetx=pageMoveeX-pageX;
                    var offsety=pageMoveeY-pageY;

                    ball.style.left=offsetx+"px";
                    ball.style.top=+offsety+"px";

                }
            }
            document.onmouseup=function(e){//当鼠标松开取消移动时间的处理函数
                document.onmousemove=null;
            }
        </script>
    </div>
</body>
</html>